<template>
	<div id="ArticleRead">
		 <toast 
			:showToast = "showToast"
			:message = "showmessage"
			:delay = "delay"
			ref="toast"
		 ></toast>
		<input v-if="flag == 1" placeholder="标题" class="title" v-model="blog.title"></input>
		<textarea v-if="flag == 1" placeholder="简介" class="description" v-model="blog.description"></textarea>
		<div v-if="flag == 0" placeholder="标题" class="divtitle" v-text="blog.title"></div>
		<mavon-editor
			 class="md"
			:value="articleDetail"
			:subfield = "prop.subfield"
			:defaultOpen = "prop.defaultOpen"
			:toolbarsFlag = "prop.toolbarsFlag"
			:editable="prop.editable"
			:scrollStyle="prop.scrollStyle"
			:navigation="prop.navigation"
			@save = "save"
		 ></mavon-editor>
		 <div>
			 <button v-if="flag == 1" @click="saveblog()" class="saveblog">保存</button>
		 </div>
		<modal 
			:title="showtitle"
			:content="showcontent"
			v-show="showModal" 
			v-on:closeme="closeme"
			v-on:confirm = "confirm"
		></modal>
	</div>
</template>
<script>
	import toast from './tools/Toast.vue'
	import modal from './tools/modal.vue'
	import config from '../../config.js'
	
	export default {
	  name: 'ArticleRead',
	  components: {
		toast,
		modal
	  },
	  data(){
		  return{
			blog:{},
			localhost:config.localhost,
			port:config.port,
			articleDetail:"",
			showToast:false,
			showmessage:"已保存",
			delay:3000,
			flag:0,
			showModal:false,
			showtitle:'保存',
			showcontent:'确认修改该博客？',
			myhtml:'',
			mymd:''
		  }
	  },  
	  computed: {
	    prop () {
		  let i = this.$route.query.id,
			  index = this.$route.query.index,
			  that = this,
			  token = this.$root.token,
			  api='http://'+this.localhost+':'+this.port+'/getblogbyid';
		  //flag判断是阅读还是编辑操作
		  this.flag = this.$route.query.flag;
		  this.$http.get(api,{params: {token:token,id:i}}).then((response)=>{
			    console.log('computed--read',response,index);
				that.articleDetail = response.body.data[index].content;
				that.blog = response.body.data[index];
		  },function(err){
				console.log(err);
		  })
		  //阅读操作
	      let data = {
	        subfield: false,// 单双栏模式
	        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
	        editable: false,
	        toolbarsFlag: false,
	        scrollStyle: true,
	        navigation: false
	      }
		  //编辑操作
		  if(this.$route.query.flag == 1){
			  data = {
			    subfield: true,// 单双栏模式
			    defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
			    editable: true,
			    toolbarsFlag: true,
			    scrollStyle: true,
			    navigation: true
			  }
		  }
	      return data
	    }
	  },
	  mounted: function(){
		  
	 },
	  methods:{
		  //md编辑保存
		  save(value, render) {
		       this.myhtml = render;
			   this.mymd = value;
		       // console.log(value, render);
		 },
		 //替换转义字符
		 transformstr(str){
			str = str.replace(/'/g,'\\\'');
			str = str.replace(/"/g,'\\\"');
			return str;
		},
		cancel(){
			this.$router.go(-1);
		},
		//关闭弹窗
		closeme(){
		  this.showModal = !this.showModal;
		},
		//打开弹窗
		saveblog(){
			this.showModal = !this.showModal;
		},
		 //博客确认保存
		 confirm(){
			 let that = this,
				 api='http://'+this.localhost+':'+this.port+'/editblog',
				 title = this.transformstr(this.blog.title),
				 description = this.transformstr(this.blog.description),
				 content = this.transformstr(this.mymd),
				//  html_content = this.transformstr(this.myhtml),
				 html_content = this.myhtml,

				 token = this.$root.token,
				 id = this.$route.query.id;
				//  console.log(html_content);
				//  return;
			 this.$http.post(api,{params: {title:title,content:content,html_content:html_content,description:description,id:id,token:token}}).then((response)=>{
				 //未登录
				 if(response.body.result == false){
					 that.showmessage = "请重新登录";
					 that.showToast = true;
					 setTimeout(function(){
						 that.$router.push('/');
						 that.$router.go(0);
					 },that.delay);
				 }
			 	console.log(response);
			 },function(err){
			 	console.log(err);
			 })
			 return;
			 this.showmessage = "正在保存……";
			 this.showToast = true;
			 this.$refs.toast.disappear();
			 setTimeout(function(){
				 that.$router.push('/');
				 that.$router.go(0);	
			 },that.delay);
		 }
	  }
	}
</script>

<style>
	#ArticleRead{
		height: 90vh;
		display: flex;
		flex-direction: column;
	}
	#ArticleRead .title{
		width: 50%;
		margin: 0.3125rem auto;
		text-align: center;
		height: 2.5rem;
		border-radius: 0.5rem;
		margin-top: 4vh;
	}
	#ArticleRead .divtitle{
		width: 50%;
		margin: 0.3125rem auto;
		text-align: center;
		/* height: 5rem; */
		border-radius: 0.5rem;
		margin-top: 4vh;
		font-size: x-large;
		font-weight: bold;
	}
	
	@media screen and (max-width:980px ) {
	 #ArticleRead .title{
		width: 90%;
	 }
	 #ArticleRead .divtitle{
		width: 90%;
	 }
	}
	#ArticleRead .description{
		width: 50%;
		margin: 0.3125rem auto;
		height: 10rem;
		border-radius: 0.5rem;
	}
	#ArticleRead .saveblog{
		width: 6.25rem;
		height: 2.5rem;
	}
	.md{
		height: 90vh;
		width: 98%;
		margin: 0.3125rem auto;
		/* margin-top: 5vh; */
		z-index: 997 !important;
	}
</style>
